<template>
  <div class="header">
    <div class="title">网站</div>
    <div class="navigationList">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#6666CC"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/movie">影视综艺</el-menu-item>
        <el-menu-item index="/award">获奖记录</el-menu-item>

        <el-menu-item index="/album">相册</el-menu-item>
        <el-menu-item index="/message">留言</el-menu-item>

        <!-- 里面放a标签，点击的时候可以跳转到相关链接 -->
        <!-- <el-menu-item index="4"
          ><a href="https://www.ele.me" target="_blank"
            >订单管理</a
          ></el-menu-item
        > -->
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "headerContent",
  components: {},
  data() {
    return { activeIndex: "1", activeIndex2: "/home" };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
  //   height: 34px;
  .title {
    font-size: 34px;
  }
  .navigationList {
    height: 80px !important;
  }
}
::v-deep(.el-menu-item) {
  height: 80px !important;
  line-height: 80px !important;
  border: none !important;

  font-size: 20px !important; /* 添加 !important 确保优先级 */
  &:hover {
    background-color: #666699 !important;
    // font-size: 22px !important;
  }
}
::v-deep(.el-menu--horizontal) {
  border: none !important;
}
</style>
